<template>
  <div class="search-container">
    <h1>主机信息查询</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input
          v-model="queryForm.host"
          placeholder="输入域名、IP地址一键查询"
        />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery()"
      >查询</el-button>
    </el-form>
    <el-divider />
    <div v-if="resultVisiable" class="result-container">
      <h3>查询结果</h3>
      <el-descriptions
        class="margin-top"
        :title="queryForm.host"
        :column="3"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            国家地区
          </template>
          {{ responseData.country_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            省市
          </template>
          {{ responseData.country_code + " - " + responseData.region_code + " - " + responseData.city }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline" />
            互联网服务提供商ISP
          </template>
          {{ responseData.isp }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets" />
            更新时间
          </template>
          {{ responseData.last_update }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building" />
            自治系统编号ASN
          </template>
          {{ responseData.asn }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building" />
            开放端口列表
          </template>
          <el-tag v-for="item in responseData.ports" :key="item">
            {{ item }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building" />
            所属组织
          </template>
          {{ responseData.org }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table v-if="false" :data="tableData" style="width: 100%">
        <el-table-column prop="ip" label="IP" width="180" />

        <el-table-column prop="timestamp" label="日期" width="180" />

        <el-table-column prop="address" label="地址信息" />
      </el-table>

      <el-divider>参考位置</el-divider>
    </div>
    <div id="map-container" class="map-container" />
  </div>
</template>

<script>

import { searchIP } from '@/api/search/index'
import { createMap, addMapMarker, setMapView } from '@/utils/map'

export default {
  name: 'SearchHost',
  data: function() {
    return {
      loading: false,
      resultVisiable: false,
      tableData: [],
      queryForm: {
        'host': '219.130.135.190'
      },
      mapInstance: false
    }
  },
  mounted: function() {
    this.mapInstance = createMap('map-container', {})
    if (undefined !== this.$route.params.ip) {
      this.queryForm.host = this.$route.params.ip
    }
  },
  methods: {
    onQuery: function() {
      this.resultVisiable = false
      this.loading = true
      searchIP(this.queryForm.host).then(resp => {
        console.log(resp)
        this.responseData = resp.data
        this.resultVisiable = true
        this.loading = false
        addMapMarker(this.mapInstance, [
          parseFloat(this.responseData.latitude),
          parseFloat(this.responseData.longitude)
        ])
        setMapView(this.mapInstance, [
          parseFloat(this.responseData.latitude),
          parseFloat(this.responseData.longitude)
        ])
      })
    }
  }
}

</script>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.search-container{
  margin:30px;
}
.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}

.el-tag {
  margin: 0 5px;
}

.el-input__inner {
  height: 60px;
  line-height: 60px;
}

#map-container {
  width: 100%;
  height: 250px;
}
</style>
